<template>
  <div>
     <el-form ref="form"  v-show="name>0" :model="form" label-width="80px">
      <el-form-item label="学校名称" prop="schoolId">
          <el-select
            v-model="form.schoolId"
            placeholder="请选择学校"
            clearable
            size="small"
            style="width: 240px"
            @change="addschool()"
          >
            <el-option
              v-for="item in schooloption"
              :key="item.index"
              :label="item.schoolName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="name>1" label="学年名称" prop="schoolYearId">
          <el-select
            v-model="form.schoolYearId"
            placeholder="请选择学年"
            clearable
            size="small"
            style="width: 240px"
            :disabled="form.schoolId==''"
            @change="addTermByYear()"
          >
            <el-option
              v-for="item in yearOptions"
              :key="item.index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="name>2" label="学期名称" prop="termId">
          <el-select
            v-model="form.termId"
            placeholder="请选择学期"
            clearable
            size="small"
            style="width: 240px"
            :disabled="form.schoolYearId==''"
            @change="addCollegeByTerm()"
          >
            <el-option
              v-for="item in termNameOptions"
              :key="item.index"
              :label="item.termName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="name>3" label="学院名称" prop="collegeId">
          <el-select
            v-model="form.collegeId"
            placeholder="请选择学院"
            clearable
             :disabled="form.termId==''"
            size="small"
            style="width: 240px"
            @change="addMajorByCollege()"
          >
            <el-option
              v-for="item in collegeOptions"
              :key="item.index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="name>4" label="专业名称" prop="majorId">
        
          <el-select
            v-model="form.majorId"
            placeholder="请选择专业"
            clearable
             :disabled="form.collegeId==''"
            @change="addMajormajorId()"
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="item in majorOptions"
              :key="item.index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          </el-form-item>
     </el-form>
  </div>
</template>

<script>
import {listMajor} from "@/api/org/major";
import { listCollege } from "@/api/org/college";
import { listTerm } from "@/api/org/term";
import { listSchool} from "@/api/org/school";
import { listSchoolyear } from "@/api/org/schoolyear";

export default {
  name: "mytree",
  props: ["row"],
       data(){
           return{
             name:"",
               //学校
               schooloption:[
               ],
            //    学年
               yearOptions:[],
            //    学期
               termNameOptions:[],
            //    学院
               collegeOptions:[],
            //    专业
               majorOptions:[],
               // 表单参数
             form: {
               schoolId:"",
               schoolYearId:"",
               termId : "",
                collegeId : "",
                majorId :""
             },
           }

       },
       created(){
         this.name=this.row
         this.form.num=this.row
         this.getschoolList()
       },
    methods:{
    //子组件返回父组件
     click() {
      this.$emit("ok", this.form);
    },
    //获取学校信息
    getschoolList(){
       listSchool().then((response) => {
        this.schooloption = response.rows;
      });
    },
    // 学校选择改变
    addschool(){
      this.form.schoolYearId="";
       this.form.termId = "";
      this.form.collegeId = "";
      this.form.majorId = "";
      listSchoolyear({ school: this.form.school}).then((res) => {
        this.yearOptions = res.rows;
      });
      this.click()
    },
   // 学年
     addTermByYear() {
      this.form.termId = "";
      this.form.collegeId = "";
      this.form.majorId = "";
      listTerm({ schoolYearId: this.form.schoolYear }).then((res) => {
        this.termNameOptions = res.rows;
      });
      this.click()
    },
    // 学期
    addCollegeByTerm(){
       this.form.collegeId = "";
      this.form.majorId = "";
      listCollege({
        termId: this.form.termId,
      }).then((res) => {
        this.collegeOptions = res.rows;
      });
      this.click()
    },
    // 学院
    addMajorByCollege(){
      this.form.majorId = "";
      listMajor({
        collegeId:this.form.collegeId,
      }).then((res) => {
        this.majorOptions = res.rows;
      });
      this.click()
    },
//    专业
    addMajormajorId(){
      this.click()
    }
    }
}
</script>

<style>

</style>